<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url(img/login1.jpg);
            background-size: 100% 660px;
        }

        input {
            outline: none;
            border: 1px solid rgb(150, 148, 148);
            border-radius: 10px;
        }

        a {
            text-decoration: none;
        }

        .container {
            width: 400px;
            height: 320px;
            border: 1px solid rgb(163, 151, 151);
            border-radius: 10px;
            overflow: hidden;
            background-color: #fff;
            margin: 100px auto;
        }

        .top_admin {
            width: 50%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: rgb(56, 78, 136);
            font-size: 18px;
            font-weight: 500;
            float: right;
            cursor: pointer;
        }

        .top_user {
            width: 50%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: rgb(56, 78, 136);
            font-size: 18px;
            font-weight: 500;
            float: left;
            cursor: pointer;
            color: color;
        }

        .now {
            color: white;
            border-bottom: 3px solid rgb(145, 139, 139);
        }

        .form-group {
            position: relative;
            margin-left: 20px;
        }

        .form-group2 {
            position: relative;
            left: -180px;
        }

        .form-group label {
            position: relative;
            left: -60px;
            top: 10px;
            font-size: 16px;
            color: black;
        }

        .form-group2 label {
            position: relative;
            left: -70px;
            top: 10px;
            font-size: 16px;
            color: black;
        }

        .form-control {
            width: 350px;
            height: 35px;
        }

        .form-control2 {
            width: 350px;
            height: 35px;
        }

        .btn1 {
            float: left;
            position: relative;
            top: 17px;
            width: 60px;
            height: 35px;
            cursor: pointer;
            font-size: 16px;
            border: 1px solid rgb(150, 148, 148);
            border-radius: 5px;
        }

        .btn2 {
            float: right;
            position: relative;
            left: 170px;
            top: -20px;
            width: 200px;
            height: 35px;
            line-height: 35px;
            border: 1px solid rgb(150, 148, 148);
            border-radius: 5px;
            font-size: 16px;
        }

        .btn3 {
            float: left;
            position: relative;
            top: 17px;
            width: 60px;
            height: 35px;
            cursor: pointer;
            font-size: 16px;
            border: 1px solid rgb(148, 148, 150);
            border-radius: 5px;
        }

        .btn4 {
            float: right;
            position: relative;
            left: 150px;
            top: -20px;
            width: 200px;
            height: 35px;
            line-height: 35px;
            border: 1px solid rgb(150, 148, 148);
            border-radius: 5px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="container" id="app">
        <div :class="top_user" @click="userLogin()">用户登录
            <user v-show="flag"></user>

        </div>
        <div :class="top_admin" @click="adminLogin">管理员登录
            <admin v-show="!flag"></admin>
        </div>
    </div>


    <template id='user'>
        <div class="form-group">
            <label for="username1">&nbsp&nbsp用户名:</label>
            <input type="text" id="username1" class="form-control" v-model="userName1">
            <label for="password1">密码:</label>
            <input type="password" id="password1" class="form-control" v-model="userPwd1">
            <button id="btn1" class="btn1" @click="login();sent(userName1)">登录</button>
            <a href="user_register.html" class="btn2">还没有账户？去注册</a>
        </div>
    </template>
    <template id='admin'>
        <div class="form-group2">
            <label for="username2">&nbsp&nbsp&nbsp&nbsp&nbsp管理账号:</label>
            <input type="text" id="username2" class="form-control2" v-model="userName2">
            <label for="password2">密码:</label>
            <input type="password" id="password2" class="form-control2" v-model="userPwd2">
            <button id="btn1" class="btn3" @click="login()">登录</button>
            <a href="admin_register.html" class="btn4">还没有账户？去注册</a>
        </div>
    </template>
</body>
<script src="js/vue.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
    Vue.component('user', {
        template: '#user',
        data() {
            return {
                userName1: '',
                userPwd1: '',
            }
        },
        methods: {
            login() {
                this.$http.post('php/user_login.php', {
                    username: this.userName1,
                    password: this.userPwd1,
                }, {
                    emulateJSON: true
                }).then(function (result) {
                    if (result.body.code == 0) {
                        alert('登陆成功,2s后跳转');
                        setTimeout(function () {
                            location.href = "user_main.html";
                        }, 2000);
                    } else {
                        alert(result.body.message)
                    }
                })
            },
            sent: function (name) {
                localStorage.setItem('name', JSON.stringify(name));
            }
        }
    })

    Vue.component('admin', {
        template: '#admin',
        data() {
            return {
                userName2: '',
                userPwd2: '',
            }
        },
        methods: {
            login() {
                this.$http.post('php/admin_login.php', {
                    adminname: this.userName2,
                    password: this.userPwd2,
                }, {
                    emulateJSON: true
                }).then(function (result) {
                    if (result.body.code == 0) {
                        alert('登陆成功,2s后跳转');
                        setTimeout(function () {
                            location.href = "admin_main.html";
                        }, 2000);
                    } else {
                        alert(result.body.message)
                    }
                })
            }
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {
            top_user: 'top_user now',
            top_admin: 'top_admin',
            flag: true,
        },
        methods: {
            userLogin() {
                this.flag = true;
                this.top_admin = 'top_admin'
                this.top_user = 'top_user now'
            },
            adminLogin() {
                this.flag = false;
                this.top_user = 'top_user'
                this.top_admin = 'top_admin now'
            }
        }
    })
</script>

</html>